<template>
  <div class="transQuery_main">
        <a-form style="width:600px;">
          <!-- <a-form-item v-bind="formItemLayout" label="选择报表类型">
          <a-select
            showSearch
            :allowClear="true"
            placeholder="选择报表类型"
            v-model="query.data.transType"
          >
           <a-select-option v-for="d in seloptions" :key="d.value">{{d.label}}
                                    </a-select-option>
          </a-select>
        </a-form-item> -->
        <a-form-item v-bind="formItemLayout" label="选择报表格式">
        <a-RadioGroup name="radioGroup" @change="typeonChange" v-model="value">
                  <a-Radio :value="1">日报</a-Radio>&nbsp;&nbsp;&nbsp;&nbsp;
                  <a-Radio :value="2">月报</a-Radio>
                  </a-RadioGroup>
                    </a-form-item>
          <a-row v-if="!ifMonth">
            <a-form-item label="选择日期" v-bind="formItemLayout">
             <a-date-picker
                :disabledDate="disabledDate"
                style="width:100%;"
                :locale="zh_CN"
                placeholder="选择日期"
                format="YYYYMMDD"
                @change="onChange"
                v-model="withdrawDate"
                :allowClear="isClear"
              />
            </a-form-item>
          </a-row>

          <a-row v-if="ifMonth">
            <a-form-item label="选择月份" v-bind="formItemLayout">
              <a-month-picker
                :disabledDate="disabledMonth"
                style="width:100%;"
                v-model="transMonth"
                :allowClear="isClear"
                format="YYYYMM"
                @change="onChange"
                placeholder="选择月份"
              />
            </a-form-item>
          </a-row>
          <a-row>
            <a-col :span="4"></a-col>
            <a-col :span="12" :offset="1">
              <a-form-item>
                <a-button class="button_sty" type="primary" @click="conexport()">下载</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <h3  class="tableClass" style="margin-bottom: 15px;">历史提现报表下载记录</h3>
        <a-table
          class="tableClass"
          :columns="columns"
          :dataSource="monthList"
          size="small"
          :pagination="false"
          :rowKey="record => record.id"
        >
          <span slot-scope="record" slot="action">
            <a href="javascript:false;void(0)" @click="downloadItem(record.id,record.fileName)">下载</a>
          </span>
        </a-table>

        <a-pagination
          class="tableClass"
          @change="onPageChange1"
          :current="pagination.current"
          :total="pagination.total"
          :pageSize="queryList.pageSize"
          style="margin-top: 10px;text-align: right"
        />
      <!-- </a-tab-pane>
    </a-tabs> -->
  </div>
</template>

<script>
const columns = [
  {
    title: "导出时间",
    dataIndex: "ctime"
  },
  {
    title: "文件名称",
    dataIndex: "fileName"
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" }
  }
];
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import zh_CN from "ant-design-vue/lib/date-picker/locale/zh_CN";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;
//上个月与前一天判断
var curDate = new Date();
var month = curDate.getMonth();
var dates = curDate.getDate();
// console.log('curDate.getMonth()', curDate.getMonth())
var lastmonth;
var lastyear;
var lastdates;
if (curDate.getMonth() <= 9) {
  lastmonth = "0" + parseInt(month);
  month = "0" + parseInt(month + 1);
} else {
  lastmonth = month;
  month = month + 1;
}
if (curDate.getMonth() == 0) {
  lastyear = curDate.getFullYear() - 1;
  lastmonth = 12;
} else {
  lastyear = curDate.getFullYear();
}
if (curDate.getDate() <= 9) {
  lastdates = "0" + (curDate.getDate() - 1);
  dates = "0" + curDate.getDate();
} else {
  lastdates = curDate.getDate() - 1;
}
//上个月
var LastMonth = lastyear + "-" + lastmonth + "-" + dates;
var onlyMonth = lastyear + "" + lastmonth;
// console.log('LastMonth', LastMonth)
export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },

  data() {
    return {
      columns,
      zh_CN,
      today: new Date(),
      isClear: false,
      ifMonth: false,
      transDate: moment(new Date(curDate.getTime() - 24 * 60 * 60 * 1000)),
      transMonth: moment(new Date(LastMonth)),
      withdrawDate: moment(new Date(curDate.getTime() - 24 * 60 * 60 * 1000)),
      withdrawMonth: moment(new Date(LastMonth)),
      excelurl: "",
      dayList: [],
      monthList: [],
      query: {
        data: {
          date: "20190911",
          transType: "trans"
        }
      },
      queryList: {
        page: 1,
        pageSize: 10,
        data: {
         
          fileDate: "day"
        }
      },
      seloptions: [
        { value: "trans", label: "交易明细" },
        { value: "withdraw", label: "提现明细" },
        { value: "withdrawApi", label: "代付明细" },
      ],
      pagination: { current: null, total: null },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      login: false,
      loading: false,
      value: 1,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 12, offset: 1 }
        }
      }
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.handleDate();
    this.listTable("day");
  },
  methods: {
    moment,
    //日期不可选
    disabledDate(current) {
      // return current > moment().endOf('day');
      return current > moment().subtract(1, "day");
    },
    //月份不可选Month
    disabledMonth(current) {
      // return current && current > moment().endOf('day');
      return current > moment().subtract(1, "day");
    },
    onChange(dates, dateStrings) {
      // this.query.data.date = null;
      this.query.data.date = dateStrings;
      // console.info(this.query.data.date);
    },
    conexport() {
      let DateOrMonth = this.query.data.date.length > 6 ? "日" : "月";
      let typeName = ""
      if(this.query.data.transType == "trans"){
        typeName = "交易明细"
      }else if(this.query.data.transType == "withdraw"){
        typeName = "提现明细"
      }else if(this.query.data.transType == "withdrawApi"){
        typeName = "代付明细"
      }
      
      const a = document.createElement("a");
      a.download = `历史${typeName}报表_${this.query.data.date}.xlsx`; //查询类型和日期根据选择变动
      let token = localStorage.getItem("token");
      let downloadUrl =
        `/agent/transaction/excelDownLoad/${this.query.data.date}/${this.query.data.transType}` +
        "?Authorization=" +
        token;
      a.href = downloadUrl;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      //   }
      // });
    },
    callback(key) {
      if (key == "1" || key == "3") {
        this.handleDate();
        this.listTable("day");
      } else {
        this.query.data.date = onlyMonth;
        this.listTable("month");
      }
    },
    //处理提交的date
    handleDate() {
      let previousDateList = new Date(curDate.getTime() - 24 * 60 * 60 * 1000)
        .toLocaleDateString()
        .split("/");
      if (parseInt(previousDateList[1]) <= 9) {
        previousDateList[1] = "0" + parseInt(previousDateList[1]);
      }
      if (parseInt(previousDateList[2]) <= 9) {
        previousDateList[2] = "0" + parseInt(previousDateList[2]);
      }
      this.query.data.date =
        previousDateList[0] +
        "" +
        previousDateList[1] +
        "" +
        previousDateList[2];
      console.log(this.query.data.date);
    },
    // 报表下载记录表格
    listTable(value) {
      this.queryList.data.fileDate = value;
      this.$axios.post("/agent/transaction/excelRecord", this.queryList).then(
        res => {
          console.log("res", res);
          if (res.data.code == "OK") {
            
              this.monthList = res.data.list;
            
            this.pagination.current = res.data.current;
            this.pagination.total = res.data.total;
          } else {
          }
        },
        err => {}
      );
    },
    // 下载单个文件
    downloadItem(id, name) {
      const a = document.createElement("a");
      a.download = name; //下载历史记录查询的文件名
      let token = localStorage.getItem("token");
      let downloadUrl =
        `agent/transaction/getUrlById/${id}?Authorization=` + token;
      a.href = downloadUrl;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);

      this.queryList.page = page;
      this.queryList.pageSize = pageSize;
      this.listTable("day");
    },
    onPageChange1: function(page, pageSize) {
      console.info(page, pageSize);

      this.queryList.page = page;
      this.queryList.pageSize = pageSize;
      this.listTable("month");
    },
    typeonChange(e){
      if(e.target.value==1){
         this.ifMonth=false;
         this.handleDate();
        this.listTable("day");
       }else if(e.target.value==2){
         this.ifMonth=true;
         this.query.data.date = onlyMonth;
        this.listTable("month");
       }
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.transQuery_main {
  padding: 70px;
}

.button_sty {
  width: 100%;
}
.tableClass {
  width: 100%;
  margin: 0 auto;
}
</style>